<template>
  <div class="container">
    <div>
      <div class="panel">
        <div class="flex v-align-c mar-10 pad-b-6 border-b">
          <img v-if="fileSpace" mode="widthFix" class="width-6 height-18 mar-r-10"
               :src="fileSpace + '/images/2-6-2-kuai.png'"/>
          <div class="flex-item">基本信息</div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20 font-w">商品排序</div>
          <div class="flex-item"><input v-model="goods.sortNo" type="number" maxlength="8" placeholder="数字越大排在越前面"/></div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20 font-w">商品名称</div>
          <div class="flex-item"><input v-model="goods.title" placeholder="请输入商品名称"/></div>
        </div>
        <div class="div-input">
          <div class="flex">
            <div class="mar-r-20 flex-item font-w">商品类目</div>
            <icon @click="$pt.navigateTo({url: '/pages/home/category/main'})"
                  class="iconfont icon-bianji2 font-22 mar-r-20"></icon>
          </div>
          <div class="flex flex-wrap pad-b-6">
            <div v-for="(item, index) in listCategory" :key="index" class="category" v-if="item.categoryType!==2"
                 :class="goods.categoryId===item.categoryId ? 'sel-category' : '' " @click="selectCategory(item)">
              {{ item.categoryName}}
            </div>
            <div v-if="listCategory.length===0" class="align-c pad-10 width-per-100 font-13 font-gray"
                 @click="$pt.navigateTo({url: '/pages/home/category/main?action=add'})">
              暂无分类，去添加一个
            </div>
          </div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20 font-w">商品价格</div>
          <div class="flex-item"><input v-model="goods.price" placeholder="请输入价格"/></div>
        </div>        
        <div class="flex v-align-c div-input" @click="showPickerUnit">
          <div class="mar-r-20 pad-t-5 pad-b-5 font-w">商品单位</div>
          <div class="mar-r-20">
            <div class="flex v-align-c">
              <div class="mar-r-10 flex">
                <div v-for="(item, index) in listGoodsUnitType" :key="index">
                  {{ goods.unitType===item.value? item.text : '' }}
                </div>
              </div>
              <div>
                <icon class="iconfont icon-xiala font-12 font-gray"></icon>
              </div>
            </div>
            <div class="picker-unit border-all box-shadow border-radius-5" v-if="isShowPicker" catchtap>
              <div :class="goods.unitType===item.value ? 'sel-picker-unit' : ''"
                   @click="onConfirm(item.text, item.value)" class="pad-2"
                   v-for="(item, index) in listGoodsUnitType" :key="index">
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>        
        <div class="flex v-align-c div-input">
          <div class="mar-r-20 mar-t-4 mar-b-4 font-w">商品规格</div>
          <div class="flex-item">
            <van-radio-group :value="goods.skuFlag" class="flex" @change="selSkuFlag">
              <van-radio checked-color="#f8c400" name='0'>单规格</van-radio>
              <van-radio checked-color="#f8c400" name='1' class="mar-l-20">多规格</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="div-input" v-if="goods.skuFlag==='1'">
          <div class="flex pad-t-5 pad-b-5 align-c">
            <div class="flex-item flex v-align-c" @click="setSkuProp(-1)">
              <img v-if="fileSpace" mode="widthFix" class="width-20 height-20 mar-r-5"
                   :src="fileSpace + '/images/2-6-xinzheng.png'"/>
              <div>添加规格项</div>
            </div>
          </div>
          <div class="flex border-all width-per-100" v-if="skuPropList.length>0">
            <div v-for="(item, index) in skuPropList" :key="index" class="pad-5 border-r flex width-80"
                 @click="setSkuProp(index)">
              <div>{{ item.skuPropName }}</div>
              <icon class="iconfont icon-bianji2 font-15 mar-r-20"></icon>
            </div>
            <div class="pad-5 sku-price-col flex">
              规格价格
            </div>
          </div>
          <div v-for="(sku, index) in skuList" :key="index" class="flex border-l border-b border-r width-per-100">
            <div v-for="(skuDetail, indexProp) in sku.skuDetailList" :key="indexProp"
                 class="pad-5 border-r flex width-80">
              {{ skuDetail.skuPropValue }}
            </div>
            <div class="pad-5 sku-price-col">
              <input v-model="sku.price" class="sku-price-input" placeholder="请输入价格"/>
            </div>
          </div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20 mar-t-4 mar-b-4 font-w">在线购买</div>
          <div class="flex-item">
            <van-radio-group :value="goods.buyFlag" class="flex" @change="selBuyFlag">
              <van-radio checked-color="#f8c400" name='1'>支持</van-radio>
              <van-radio checked-color="#f8c400" name='0' class="mar-l-20">不支持</van-radio>
            </van-radio-group>
          </div>
        </div>
        <template v-if="pickUpFlag">
          <div class="flex div-input">
            <div class="mar-r-20 mar-t-4 mar-b-4 font-w">取货方式</div>
            <div class="flex-item mar-t-6 pickup-height">
              <van-radio-group :value="buyType" class="pickup-height" @change="selBuyType">
                <div class="height-35 mar-t--23">
                  <van-radio checked-color="#f8c400" name='1' class="mar-l-20">仅支持快递配送</van-radio>
                </div>
                <div class="height-35">
                  <van-radio checked-color="#f8c400" name='2' class="mar-l-20">仅支持门店自提</van-radio>
                </div>
                <!-- <div class="mar-b--15 last-checked-item"> -->
                <div class="height-35">
                  <van-radio checked-color="#f8c400" name='3' class="mar-l-20">都支持</van-radio>
                </div>
              </van-radio-group>
            </div>
          </div>
        </template>
        <div v-if="goods.goodsType==='10' && buyType !== '2'" class="flex v-align-c div-input">
          <div class="mar-r-20 font-w">快递运费</div>
          <div class="flex-item"><input v-model="goods.freight" placeholder="请输入运费价格"/></div>
          <div class="mar-r-20 font-w">元</div>
        </div>
        <div v-if="goods.goodsType==='10'" class="flex v-align-c div-input">
          <div class="mar-r-20 font-w">分销佣金</div>
          <div class="flex-item"><input v-model="goods.distributeFee" placeholder="填0则无分销佣金"/></div>
          <div class="mar-r-20 font-w">元</div>
        </div>
      </div>
      <div class="panel">
        <div class="flex v-align-c mar-10 pad-b-6 border-b">
          <img v-if="fileSpace" mode="widthFix" class="width-6 height-18 mar-r-10"
               :src="fileSpace + '/images/2-6-2-kuai.png'"/>
          <div class="flex-item">商品图片</div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20">图片</div>
          <div class="flex-item">
            <div class="upload">
              <div class="mar-b-20">
                <div>请选择图片上传，最多可以传6张</div>
                <div class="font-gray font-13">推荐尺寸：750*750px</div>
              </div>
              <upload-img v-show="files.length <= 6" @upLoadSuccess="upLoadSuccess" @upLoadFail="upLoadFail" @uploadDelete="uploadDelete"
                          :showTip=false :uploadFiles="goods.images" v-if="isInitDone"
                          :maxLength=6 :count=6></upload-img>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="panel">
          <div class="flex v-align-c mar-10 pad-b-6 border-b">
            <img v-if="fileSpace" mode="widthFix" class="width-6 height-18 mar-r-10"
                 :src="fileSpace + '/images/2-6-2-kuai.png'"/>
            <div class="flex-item">商品简介</div>
          </div>
          <custom-rich-text v-model="goods.details"></custom-rich-text>
        </div>
      </div>
      <div class="pad-30"></div>
      <bottom-btn @save="doSave" :globelStyle="globalStyle"></bottom-btn>
    </div>
    <!--sku-->
    <set-sku-prop @saveSkuProp="saveSkuProp" @delSkuProp="delSkuProp" ref="setSkuProp"></set-sku-prop>
    <!-- 佣金说明 -->
    <div class="popup explain-popup" v-show="popupCur">
      <div class="popup-item">
        <div class="title">佣金说明</div>
        <div class="centent">
          <h5>1.什么是顾客佣金？</h5>
          <p>例如：商品100元，顾客佣金10元；微客A(顾客) →  分享商品 →  微客B(顾客) 付费购买该商品  →
              微客B(顾客) 获得顾客佣金10元，您获得的金额为100元 - 10元(顾客佣金) - 0.5元(手续费) = 89.5元。</p>
          <h5>2.按比例设置和按金额设置的区别是什么？</h5>
          <p>a.按比例：商品零售价  X  分销比例  = 顾客佣金</p>
          <p>b.按金额：顾客佣金   =  设置的金额</p>
          <p>c.不设置：该商品不参与分销，无任何分销佣金。</p>
        </div>
        <div class="btn"><span @click="popclose">朕知道了</span></div>
      </div>
    </div>
  </div>
</template>

<script>
  import UploadImg from '@/components/UploadImg'
  import CustomRichText from '@/components/CustomRichText'
  import BottomBtn from '@/components/BottomBtn'
  import SetSkuProp from '../components/SetSkuProp'

  import {
    listUserGoodsCategoryByMemberId,
    listGoodsUnitType,
    getUserGoodsByGoodsId,
    saveUserGoods,
    getMemberShopSetting
  } from '@/api/shop'
  import { getSysAppMarketByMemberId } from '@/api/personal'

  export default {
    components: { UploadImg, CustomRichText, BottomBtn, SetSkuProp },
    data() {
      return {
        popupCur: false,
        goods: {
          memberId: '',
          goodsId: '',
          title: '',
          categoryId: '',
          goodsType: '',
          buyFlag: '',
          unitType: '1',
          price: '',
          freight: '',
          images: [],
          details: [],
          distributeFee: '',
          skuFlag: '0'
          // commissionType: '3'
        },
        buyType: '3',
        skuPropList: [],
        skuList: [],
        listCategory: [],
        isShowPicker: false,
        listGoodsUnitType: [],
        files: [],
        isUploadFinish: false,
        isInitDone: false,
        random: '',
        storeCardFlag: null,
        pickUpFlag: false,
        memberStore: {},
        globalStyle: {}
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    // 监听上传是否完成
    watch: {
      isUploadFinish(val) {
        if (this.isUploadFinish) {
          this.doSave()
        }
      }
    },
    onShow() {
      let getAppInfo = this.$pt.getStorageSync('appInfo')
      this.globalStyle = getAppInfo.style
      this.getMemberShopSetting()
      this.getSysAppMarketByMemberId()
      this.initListCategory()
      let storeCardFlag = this.$pt.getStorageSync('storeCardFlag')
      if (storeCardFlag) {
        this.storeCardFlag = storeCardFlag
      }
    },
    mounted() {
      // 默认选中
      let categoryId = this.getCurrentPage().query.categoryId
      if (categoryId === 'undefined') {
        categoryId = ''
      }
      if (categoryId) {
        this.selectCategory({
          categoryId: categoryId
        })
      }
      this.goods.memberId = this.getCustomerId
      this.initUserGoods()
      this.initListGoodsUnitType()
    },
    methods: {
      getMemberShopSetting() {
        getMemberShopSetting(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.memberStore = response.data
        }).catch(() => {
        })
      },
      // 是否开通核销台
      getSysAppMarketByMemberId() {
        let params = {
          memberId: this.getCustomerId,
          userType: 1,
          appCode: 'pickUpFlag'
        }
        getSysAppMarketByMemberId(params).then(response => {
          if (response.isError) return
          this.pickUpFlag = response.data
          if (!this.pickUpFlag) {
            this.buyType = '1'
          }
        })
      },
      // 显示说明弹窗
      popShow() {
        this.popupCur = true
      },
      // 关闭说明弹窗
      popclose() {
        this.popupCur = false
      },
      initUserGoods() {
        const goodsId = this.getCurrentPage().query.goodsId
        if (!goodsId) {
          this.isInitDone = true
          this.goods.goodsType = '10' // 10: 实物 ，20：虚拟
          this.goods.buyFlag = '1'
          return
        }
        this.goods.goodsId = goodsId
        getUserGoodsByGoodsId({
          goodsId: goodsId,
          memberId: this.getMemberId,
          customerId: this.getCustomerId,
          goodsType: 10
        }).then((response) => {
          if (response.isError) return
          // radio需要字符串类型的
          response.data.goodsType = response.data.goodsType.toString()
          response.data.buyFlag = response.data.buyFlag.toString()
          response.data.unitType = response.data.unitType.toString()
          response.data.skuFlag = response.data.skuFlag.toString()
          // response.data.commissionType = response.data.commissionType.toString()
          this.goods = response.data
          // 对象内对数据变化有时不响应，把值放在data根下面
          this.skuPropList = this.goods.skuPropList ? this.goods.skuPropList : []
          this.skuList = this.goods.skuList ? this.goods.skuList : []
          this.isInitDone = true
          if (response.data.expressFlag === 1 && response.data.pickUpFlag === 1) {
            this.buyType = '3'
          }
          if (response.data.expressFlag === 1 && response.data.pickUpFlag === 0) {
            this.buyType = '1'
          }
          if (response.data.expressFlag === 0 && response.data.pickUpFlag === 1) {
            this.buyType = '2'
          }
        }).catch(() => {
        })
      },
      // 类目
      initListCategory() {
        listUserGoodsCategoryByMemberId(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.listCategory = response.data
        }).catch(() => {
        })
      },
      // 价格单位
      initListGoodsUnitType() {
        listGoodsUnitType(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.listGoodsUnitType = this.$utils.objToArr(response.data, ['text', 'value'])
        }).catch(() => {
        })
      },
      upLoadSuccess(res) {
        console.log(res)
        this.files = res.files
      },
      uploadDelete(res) {
        this.files = res.files
      },
      onConfirm(text, value) {
        this.goods.unitType = value
        this.isShowPicker = false
      },
      showPickerUnit() {
        this.isShowPicker = !this.isShowPicker
      },
      selGoodsType(e) {
        this.goods.goodsType = e.mp.detail
      },
      selBuyFlag(e) {
        this.goods.buyFlag = e.mp.detail
      },
      selBuyType(e) {
        this.buyType = e.mp.detail
      },
      // 选择类目
      selectCategory(item) {
        if (this.goods.categoryId === item.categoryId) {
          this.goods.categoryId = ''
        } else {
          this.goods.categoryId = item.categoryId
          const changeData = this.goods.categoryId
          this.$delete(this.goods, 'categoryId')
          this.$set(this.goods, 'categoryId', changeData)
        }
      },
      doSave() {
        if (this.buyType !== '1' && this.pickUpFlag && !this.memberStore.storeAddress) {
          const that = this
          that.$pt.showModal({
            content: '您暂未设置门店地址，请前往设置！',
            success(res) {
              if (res.confirm) {
                that.$pt.navigateTo({ url: '/pages/home/shop-setting/main' })
              } else if (res.cancel) {
                console.log('用户取消')
              }
            }
          })
          return
        }
        if (this.files.length > 6) {
          return this.$utils.showToast({ title: '最多只能上传6张图片' })
        }
        if (!this.isUploadFinish) {
          if (this.goods.sortNo !== '0' && this.goods.sortNo !== 0 && this.goods.sortNo) {
            if (!this.$utils.isNumber(this.goods.sortNo)) return this.$utils.showToast({ title: '排序必须是数字' })
            if (!this.$utils.integer(this.goods.sortNo)) return this.$utils.showToast({ title: '排序必须是整数' })
          }
          if (this.goods.sortNo) {
            this.goods.sortNo = Number(this.goods.sortNo)
          }
          if (this.goods.title === '') return this.$utils.showToast({ title: '请输入商品名称' })
          if (this.goods.categoryId === '' && this.listCategory.length > 0) return this.$utils.showToast({ title: '请选择一个类目' })
          if (this.goods.price === '') return this.$utils.showToast({ title: '请输入商品价格' })
          if (!this.$utils.isNumber(this.goods.price)) return this.$utils.showToast({ title: '商品价格必须是数字' })
          if (this.goods.price * 1 <= 0) return this.$utils.showToast({ title: '商品价格必须大于0' })
          if (this.goods.freight === '') this.goods.freight = '0'
          if (!this.$utils.isNumber(this.goods.freight)) return this.$utils.showToast({ title: '运费必须是数字' })
          if (this.goods.freight * 1 < 0) return this.$utils.showToast({ title: '运费必须大于等于0' })
          if (this.goods.distributeFee) {
            if (!this.$utils.isNumber(this.goods.distributeFee)) return this.$utils.showToast({ title: '佣金金额必须是数字' })
            if (this.goods.distributeFee * 1 < 0) return this.$utils.showToast({ title: '佣金金额必须大于等于0' })
            if (this.goods.distributeFee * 1 > this.goods.price * 1) return this.$utils.showToast({ title: '佣金金额必须小于等于商品金额' })
          }
          // if (this.goods.commissionType === '1') {
          //   this.goods.distributeRatio = ''
          //   if (!this.$utils.isNumber(this.goods.distributeFee)) return this.$utils.showToast({ title: '佣金金额必须是数字' })
          //   if (this.goods.distributeFee * 1 < 0) return this.$utils.showToast({ title: '佣金金额必须大于等于0' })
          //   if (this.goods.distributeFee * 1 > this.goods.price * 1) return this.$utils.showToast({ title: '佣金金额必须小于等于商品金额' })
          // }
          // if (this.goods.commissionType === '2') {
          //   this.goods.distributeFee = ''
          //   if (!this.$utils.isNumber(this.goods.distributeRatio)) return this.$utils.showToast({ title: '佣金比例必须是数字' })
          //   if (this.goods.distributeRatio * 1 <= 0) return this.$utils.showToast({ title: '佣金比例必须大于0' })
          //   if (this.goods.distributeRatio * 1 > 100) return this.$utils.showToast({ title: '佣金比例必须小于等于100' })
          // }
          // if (this.goods.commissionType === '3') {
          //   this.goods.distributeFee = ''
          //   this.goods.distributeRatio = ''
          // }
          if (this.goods.skuFlag === '1') {
            if (this.skuList.length === 0) return this.$utils.showToast({ title: '请添加商品规格' })
            this.goods.skuPropList = this.skuPropList
            this.goods.skuList = this.skuList
            let ifSetPrice = true
            // 判断价格是否填写完整
            this.skuList.forEach((item) => {
              if (!item.price) {
                ifSetPrice = false
              }
            })
            if (!ifSetPrice) return this.$utils.showToast({ title: '请输入商品规格价格' })
          }
          if (this.files.length === 0 && !this.goods.goodsId) return this.$utils.showToast({ title: '请选择要上传的图片' })
          this.$utils.showToast({
            title: '图片上传中',
            icon: 'loading',
            duration: 150000,
            mask: true
          })
          // 开始上传文件
          this.doUpload()
        } else {
          // 上传完成，清除数据
          this.files = []
          // 防止重复提交
          if (this.submitted) return
          this.submitted = true
          // 保存数据
          if (!this.goods.freight) this.goods.freight = 0
          if (!this.goods.categoryId) this.goods.categoryId = ''
          switch (this.buyType) {
            case '1':
              this.goods.expressFlag = 1
              this.goods.pickUpFlag = 0
              break
            case '2':
              this.goods.expressFlag = 0
              this.goods.pickUpFlag = 1
              this.goods.freight = 0
              break
            case '3':
              this.goods.expressFlag = 1
              this.goods.pickUpFlag = 1
              break
          }
          this.goods.images.reverse()
          saveUserGoods(this.goods).then((response) => {
            if (response.isError) {
              this.submitted = false
              return
            } else {
              this.$pt.hideToast()
            }
            this.$utils.showToast({ title: '保存成功' })
            setTimeout(() => {
              this.$pt.navigateBack({ delta: -1 })
            }, 500)
          }).catch(() => {
          })
        }
      },
      doUpload() {
        const that = this
        let index = 0
        let finishCount = 0
        if (this.files.length === 0) {
          that.isUploadFinish = true
        }
        this.files.forEach(file => {
          if (index === 0) {
            // 数组重新计算
            that.goods.images = []
          }
          index++
          // 使用微信上传（只能单张上传）
          const uploadTask = that.$pt.uploadFile({
            url: process.env.BASE_API + '/common/uploadFiles',
            filePath: file,
            name: 'files',
            success(res) {
              const result = JSON.parse(res.data)
              if (result.statusCode >= 400) {
                finishCount--
                that.$pt.hideToast()
                return
              }
              if (result.code === 101) {
                that.goods.images.push(result.data[0])
              } else {
                that.$utils.showToast({ title: '图片上传发生错误:' + result.msg })
                finishCount--
              }
            },
            fail() {
              // that.$pt.hideToast()
              // 网络图片会直接fail
              that.goods.images.push(file)
            },
            complete(res) {
              if (res.statusCode >= 400 && res.statusCode !== 504) {
                that.$utils.showToast({ title: '当前网络不可用，请检查你的网络设置（' + res.statusCode + '）' })
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 800)
                return
              }
              if (res.statusCode === 504) {
                that.$utils.showToast({ title: '网络异常，请稍后再试（' + res.statusCode + '）' })
                setTimeout(() => {
                  that.$pt.hideToast()
                }, 800)
                return
              }
              finishCount++
              if (that.files.length === finishCount) {
                that.isUploadFinish = true
              }
            }
          })
          uploadTask.onProgressUpdate((res) => {
            console.log('上传进度', res.progress)
          })
        })
      },
      initSkuList() {
        const oldSkuList = this.$utils.deepClone(this.skuList)
        // 清除，使数据更新
        this.skuList = []
        let skuPropArray = []
        this.skuPropList.forEach((item) => {
          skuPropArray.push(item.skuPropValueList)
        })
        // 获取笛卡尔积
        this.$utils.descartes(skuPropArray).forEach((item, index) => {
          let skuDetail = this.$utils.deepClone(item)
          if (!this.skuList[index]) {
            this.skuList[index] = {}
          }
          if (skuPropArray.length < 2) {
            this.skuList[index].skuDetailList = [skuDetail]
          } else {
            this.skuList[index].skuDetailList = skuDetail
          }
          this.skuList[index].goodsId = this.goods.goodsId
          this.skuList[index].memberId = this.goods.memberId
        })
        // 更新sku价格
        this.updateSkuPrice(oldSkuList)
      },
      setSkuProp(index) {
        if (index < 0) {
          if (this.skuPropList.length >= 3) return this.$utils.showToast({ title: '最多能添加3组规格' })
        }
        this.$refs.setSkuProp.show(this.skuPropList[index], index)
      },
      selSkuFlag(e) {
        this.goods.skuFlag = e.mp.detail
      },
      saveSkuProp(skuProp, index) {
        if (index >= 0) {
          // 替换
          this.skuPropList.splice(index, 1, skuProp)
        } else {
          // 新增
          this.skuPropList.push(skuProp)
        }
        this.initSkuList()
      },
      delSkuProp(index) {
        this.skuPropList.splice(index, 1)
        this.initSkuList()
      },
      updateSkuPrice(oldSkuList) {
        this.skuList.forEach((item) => {
          const price = this.getSkuPrice(oldSkuList, item)
          if (!price) {
            item.price = this.goods.price
          } else {
            item.price = price
          }
        })
        // 激活数据更新
        this.random = Math.random()
      },
      // changeCommissionType(e) {
      //   this.goods.commissionType = e.mp.detail
      // },
      // 从历史sku里取价格
      getSkuPrice(oldSkuList, newSku) {
        for (let index = 0; index < oldSkuList.length; index++) {
          let item = oldSkuList[index]
          let isGetSkuPrice = true
          item.skuDetailList.forEach((skuDetail, index) => {
            if (!newSku.skuDetailList[index]) {
              return false
            }
            if (skuDetail.skuPropValueId !== newSku.skuDetailList[index].skuPropValueId) {
              isGetSkuPrice = false
            }
          })
          if (isGetSkuPrice) {
            return item.price
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .pickup-height{
    min-height: 95px;
  }
  .last-checked-item{
    margin-top: -34px;
  }
  .item image {
    width: 80px;
    height: 80px;
  }

  .div-input {
    border-bottom: 0.5px solid #d9d9d9;
    margin-left: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .commission {
    border-bottom: none;
    /deep/ ._van-radio {
      margin-left: 10px;
      &:first-child {
        margin-left: 0;
      }
      .van-radio__label {
        margin-left: 3px;
        font-size: 14px;
      }
    }
  }

  .div-input:last-child {
    border-bottom: 0;
  }

  .div-input input {
    max-width: 90%;
  }

  .sku-price-input {
    width: 90px;
    height: 25px;
    padding-left: 5px;
    background-color: #f6f6f6;
  }

  .sku-price-col {
    min-width: 100px;
  }

  .category {
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 5px;
    border: 0.5px solid #e5e5e5;
    padding: 2px 10px;
  }

  .sel-category {
    background-color: #f8c400;
  }

  .picker-unit {
    padding: 10px;
    width: 80px;
    background-color: #fff;
    position: absolute;
    z-index: 100;
  }

  .sel-picker-unit {
    color: red;
  }

  .money-import {
    background-color: #f2f2f2;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
    padding-left: 14.5px;
    padding-right: 14.5px;
    margin-bottom: 3px;
    h5 {
      width: 63px;
      font-size: 14px;
    }
    .info {
      flex-direction: column;
      width: 221px;
      span {
        height: 24px;
        justify-content: flex-end;
        align-items: center;
        font-size: 10px;
        color: #FF874E;
      }
      .input {
        height: 31px;
        justify-content: space-between;
        border: solid 1px #8b8b8b;
        border-radius: 8px;
        overflow: hidden;
        input {
          height: 100%;
          font-size: 14px;
          background-color: #fff;
          width: 194px;
        }
        i {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-left: 1px solid #8b8b8b;
          width: 27px;
        }
      }
      p {
        height: 21px;
        display: flex;
        align-items: center;
        font-size: 10px;
        color: #999999;
      }
    }
  }

  .explain-popup {
    .popup-item {
      width: 285px;
      height: 380px;
      position: relative;
      background-color: #fff;
      border-radius: 8px;
      .title {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #333333;
      }
      .centent {
        position: absolute;
        top: 60px;
        right: 20px;
        left: 20px;
        bottom: 75px;
        overflow-x: hidden;
        overflow-y: auto;
        h5 {
          font-weight: bold;
          font-size: 14px;
          color: #5A5A5A;
        }
        p {
          font-size: 14px;
          color: #5A5A5A;
        }
      }
      .btn {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          height: 41px;
          width: 250px;
          background: #fdc907;
          border-radius: 100px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          color: #333333;
        }
      }
    }
  }
</style>
